<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport"content="width=device-width,initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0,user-scalable=no">
  <title>猜电影</title>
</head>
<body>
<h1>点击标题，开始录音翻译</h1>
<div id="director"></div>
<p id="title"></p>
<p id="year"></p>
<p id="poster"></p>
<!--用来实现功能的移动端库-->
<script src="http://zeptojs.com/zepto-docs.min.js"></script>
<!--需要调用JS接口，就必须引入此文件 -->
<script src="http://res.wx.qq.com/open/js/jweixin-1.2.0.js"></script>
<script>
  $(function () {
    //微信全局配置，注入配置信息
    wx.config({
      debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
      appId: 'wxc8e92f7ab70fbca0', // 必填，公众号的唯一标识
      timestamp: '<%= timestamp %>', // 必填，生成签名的时间戳
      nonceStr: '<%= noncestr %>', // 必填，生成签名的随机串
      signature: '<%= signature %>',// 必填，签名
      jsApiList: [
        'startRecord',
        'stopRecord',
        'onVoiceRecordEnd',
        'translateVoice',
        'onMenuShareTimeline',
        'onMenuShareAppMessage',
        'onMenuShareQQ',
        'onMenuShareWeibo',
        'onMenuShareQZone'
      ] // 必填，需要使用的JS接口列表，没填的JS接口不能使用
    })
    //config信息验证后会执行ready方法，所有微信接口都在ready函数中调用
    wx.ready(function(){
      //判断当前客户端版本是否支持指定JS接口，此处只举一个例子
      wx.checkJsApi({
        jsApiList: ['onVoiceRecordEnd'], // 需要检测的JS接口列表，所有JS接口列表见附录2,
        success: function(res) {
          // 以键值对的形式返回，可用的api值true，不可用为false
          // 如：{"checkResult":{"chooseImage":true},"errMsg":"checkJsApi:ok"}
          console.log(res)
        }
      })

      const isRecording = false

      $('h1').on('tap', function () {
        if (!isRecording) {
          isRecording = true
          //开始录音
          wx.startRecord({
            cancel: function () {
              window.alert('您取消了音频录制，需要打开此功能')
            }
          })
          return
        }
        isRecording = false
        //停止录音
        wx.stopRecord({
          success: function (res) {
            const localId = res.localId
            //识别音频并返回识别结果
            wx.translateVoice({
              localId: localId,
              isShowProgressTips: 1, // 默认为1，显示进度提示
              success: function (res) {
                //识别后的结果，文本字符串
                const result = res.translateResult
                //根据结果请求豆瓣电影查询API
                $.getJSON('https://api.douban.com/v2/movie/search?q=' + result + '&callback=?', function (data) {
                  console.log(data)
                  const subjects = data.subjects[0]
                  console.log(subjects)
                  //将请求后返回的结果内容显示到页面上去
                  $('#director').html(subjects.directors[0].name)
                  $('#title').html(subjects.title)
                  $('#year').html(subjects.year)
                  $('#poster').html('<img src="' + subjects.images.large + '" />')
                  //添加一个分享给朋友接口
                  wx.onMenuShareAppMessage({
                    title: subjects.title, // 分享标题
                    desc: '我搜出来了' + subjects.title, // 分享描述
                    link: 'http://079e92c1.ngrok.io/share', // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
                    imgUrl: subjects.images.large, // 分享图标
                    type: 'link', // 分享类型,music、video或link，不填默认为link
                    dataUrl: '', // 如果type是music或video，则要提供数据链接，默认为空
                    success: function () {
                      // 用户确认分享后执行的回调函数
                      alert('分享成功')
                    },
                    cancel: function () {
                      // 用户取消分享后执行的回调函数
                      alert('分享失败')
                    }
                  })
                })
                alert(res.translateResult); // 语音识别的结果
              }
            })
          }
        })
      })
    })
  })
</script>
</body>
</html>